import React from "react";
import ReactDOM from "react-dom/client";
import { hook, useState } from "./hook/index";

//! useState 可以管理多个状态的值
function App() {
    let [number, setNumber] = useState(0);
    let [count, setCount] = useState(100);
    // 此时执行栈中存放的数据顺序 [0: number, 1: count]
    return (
        <div>
            <h1>{number}</h1>
            <button onClick={() => setNumber(number + 1)}>累加</button>
            <br></br>
            <h2>{count}</h2>
            <button onClick={() => setCount(count - 1)}>累减</button>
        </div>
    );
}

const root = ReactDOM.createRoot(document.getElementById("root"));

export function render() {
    hook.index = 0; // 每次渲染都得重置指针从开头进行匹配, 不然进行 useState() 执行会在执行栈后面添加
    root.render(<App />);
}
render();

// 1) useState 我们将useState的状态 管理到数组里， 将索引和状态关联起来
// 2) 每次更新状态的时候 通过索引获取对应的状态，并进行更新
